jQuery(function(){
	jQuery('.dragbox')
	.each(function(){
		jQuery(this).hover(function(){
			jQuery(this).find('h2').addClass('collapse');
		}, function(){
			jQuery(this).find('h2').removeClass('collapse');
		})
		.find('h2').hover(function(){
			jQuery(this).find('.configure').css('visibility', 'visible');
		}, function(){
			jQuery(this).find('.configure').css('visibility', 'hidden');
		})
		.click(function(){
			jQuery(this).siblings('.dragbox-content').toggle();
		})
		.end()
		.find('.configure').css('visibility', 'hidden');
	});
	jQuery('.column').sortable({
		connectWith: '.column',
		handle: 'h2',
		cursor: 'move',
		placeholder: 'placeholder',
		forcePlaceholderSize: true,
		opacity: 0.4,
		stop: function(event, ui){
			jQuery(ui.item).find('h2').click();
			var sortorder='';
			jQuery('.column').each(function(){
				var itemorder=jQuery(this).sortable('toArray');
				var columnId=jQuery(this).attr('id');
				sortorder+=columnId+'='+itemorder.toString()+'&';
			});
			alert('SortOrder: '+sortorder);
			/*Pass sortorder variable to server using ajax to save state*/
		}
	})
	.disableSelection();
});

